<template>
    <div id="top">
        <p style="float:left; margin:0 30px; font-size: 32px; display:inline; line-height:60px">影视列表</p>
        <p v-show="!login" style="float:right; display:inline; line-height: 60px; margin:0 20px"><a @click="onLogin" style="color:blue;cursor:pointer">登录</a>或<a @click="onRegist" style="color:blue;cursor:pointer">注册</a></p>
        <p v-show="login" style="float:right; display:inline; line-height: 60px; margin:0 20px">{{name}}</p>
        <img v-if="!login" v-bind:src="defalt_head" style="float:right; margin-right: 10px;width: 60px; height: 60px; border-radius:50px; background-color:#cdf2a9">
        <img v-else v-bind:src='head' style="float:right; margin-right: 10px;width: 60px; height: 60px; border-radius:50px; background-color:#cdf2a9">
    </div>
</template>

<script>
export default {
    data(){
        return{
            login:false,
            name:'',
            defalt_head:'src/assets/logo.png',
            head:''
        }
    },
    methods:{
        onLogin(){
           this.$parent.openLogin()
        },
        onRegist(){
            this.$parent.openRegist();
        }
    }
}
</script>

<style>
#top{
    position: fixed;
    height: 60px;
    width: 100%;
    background-color: #f6f9f4;
    z-index: 9999;
    overflow: hidden;
}
</style>

